<template>
	<view class="content">
		<u-navbar placeholder @leftClick="back" bgColor="#FC2530" titleStyle="color:white;" title="门票预约"
			leftIconColor="#fff">
		</u-navbar>
		<view>
			<view class="bg">
				
			</view>
			<view class="ticket">
				<view class="list">
					<view class="list_item">
						<view class="item_body">
							<view class="body_left">
								<u-image :src="scenicDetails.ticketImg|photoPrefix" radius="10px" width="280rpx" height="225rpx"
									:fade="true" duration="450"></u-image>
							</view>
							<view class="body_right">
								<view>
									<u-text size="38rpx" :text="scenicDetails.ticketTypeName" :lines="1"></u-text>
									<view>
										<!-- style="display: inline-block;" -->
										<u-tag v-for="items in scenicDetails.ticketTag"
											style="display: inline-block;margin-right: 10rpx;" plainFill plain
											shape="circle" :text="items" size="mini" type="primary"></u-tag>
									</view>
									<!-- <u-text :lines="1" :text="item.scenicType"></u-text> -->
								</view>
								<view style="display: flex;justify-content: space-between;align-items: center;">
									<view class="money">
										<u-text size="38rpx" blod :text="'¥'+0" type="error">
										</u-text>
										<u-tag class="tag" style="display: inline-block;" shape="circle"
											:text="scenicDetails.isEnable?'可退':'不可退'" size="mini" type="error">
										</u-tag>
									</view>
									<view class="buySubmit">
										<!-- <u-button size="large" type="primary" text="预约" @click="buy(scenicDetails)">
														</u-button> -->
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="_abbr">
					<u-text :text="`共${scenicDetails.number}张门票，合计：0元`"></u-text>
				</view>
				<view class="_abbr">
					<u-button type="primary" @click="submit">付款</u-button>
				</view>
			</view>
		</view>
		<u-notify ref="notify"></u-notify>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scenicDetails: {
				},
			}
		},
		onLoad(option) {
			this.scenicDetails = JSON.parse(decodeURIComponent(option.item))
		},
		methods:{
			submit(){
				this.$api({
					url: '/customer/payOrder/' + this.scenicDetails.id,
					method: 'get'
				}).then((res) => {
					if(res.code==200){
						this.$refs.notify.primary(res.message)
						setTimeout(()=>{
							uni.switchTab({
								url:'/pages/index/index'
							})
						},1000)
						
					}else{
						this.$refs.notify.warning(res.message)
					}
				})
			},
			back() {
				uni.navigateBack({
					delta: 2
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		.bg {
			padding: 10rpx 30rpx;
			background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
			--tw-gradient-from: #FC2530;
			--tw-gradient-stops: var(--tw-gradient-from), #FC2530, var(--tw-gradient-to, rgba(185, 28, 28, 0));
			height: 500rpx;
			
		}
		.ticket {
			// --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
			// box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
			border-radius: 20rpx;
			background-color: #fff;
			padding: 30rpx;
			margin: 0 30rpx;
			margin-top: -400rpx;
			.list {
		
				.item_body {
					display: flex;
		
					.body_right {
						// width: 100%;
						padding: 0 25rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
		
					}
				}
			}
			._abbr{
				padding: 50rpx 0;
			}
		}
	}
</style>
